<template>
  <div>
    <h1>父组件</h1>
    <hr />
    <zi-com>
      <!-- 具名插槽调用 -->
      <!-- v-slot:head 简写为 #head -->
      <template #head>
        <div>
          <h1 style="color:blue;">我传递的头部样式</h1>
        </div>
      </template>
      <!-- 默认插槽 -->
      <template>
        <div>
          <h1 style="color:red;">父组件通过默认插槽传递的内容</h1>
          <h2>qwer 一套带走</h2>
        </div>
      </template>
      <template #con>
        <div>
          <h1 style="color:green;">我是内容</h1>
        </div>
      </template>
      <template #foot>
        <div>
          <h1 style="color:green;">我是脚步</h1>
        </div>
      </template>
    </zi-com>
    <hr />
    <ss-com>
      <template v-slot:two="scope">
        <div>
          <h1 style="color:red;">
            {{ scope.row.username }}--{{ scope.row.age }}
            --父组件传递的自定义内容
          </h1>
        </div>
      </template>
    </ss-com>
    <ss-com>
      <template #two="{row}">
        <div>
          <h1>{{ row.username }}--{{ row.age }}给子组件插槽传递内容</h1>
        </div>
      </template>
    </ss-com>
  </div>
</template>

<script>
// 插槽  子组件给父组件 预留的自定义内容组件

import ziCom from './ziSlot.vue'
import ssCom from './scopeSlot.vue'
export default {
  components: { ziCom, ssCom }
}
</script>
